ReactのMain Concept：6. Handling Events
React elementsのイベントハンドリングは、DOM要素のイベントハンドリングに似ている ReactのeventはcamelCase
x onclick
o onClick
ハンドラに関数をそのまま渡せる
onClick={activateLasers}
「ブラウザのデフォルトの挙動」をさせないようにするとき、DOM要素のときにはfalseを返していたが、Reactの場合preventDefaultをつける必要がある
ブラウザのデフォルトの挙動とは
「formの中でsubmitボタンを押したらサーバに情報が送られる」みたいな挙動
code:js
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
ユーザはこれを使えばクロスブラウザ対応を考えなくて良くなる
リスナーの登録
Reactを使った場合、（HTMLで）DOM elementを作成した後に、（JavaScriptで）addEventListenerを呼んでリスナーを追加するという典型的な処理は不要 elementが最初にレンダリングされるときにリスナーを渡すだけでよい
Componentを使ったときに、classのmethodにハンドラを登録する典型的なパターン
イベントハンドラをmethodにする
（今回の場合は、handlerでthisを使うために、constructorでhandlerにthisをbindしている）
Reactに限らず、JavaScriptにおいて、class methodはデフォルトではbindされないため
ふつう、メソッドを()なしで呼んだ（onClick={this.handleClick}）あとはメソッドをbindする必要がある
でもbindいちいち呼ぶのはめんどう…なにかいい方法はないんですか！？kadoyau.icon
React.icon 方法は2つある
1. public class fields syntaxを使うとclass fieldが正しくコールバックにbindされる
ただしexperimental syntax
2. callbackに直接arrow functionを書く
パフォーマンスがよくないので非推奨
componentがrenderされるとき、毎回ちがうcallbackが作成されてしまう
殆どの場合問題がないが、callbackがpropとして下位のcomponentに渡されると、それらも再描画されてしまう
better practice：onClickには対応するhandlerを書こうkadoyau.icon
Passing Arguments to Event Handlers
ループ中ではevent handlerにパラメータ（例えばid）を渡したいときがある
code:js
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
これらは等価。arrow functionでもFunction.prototype.bind（下）のどちらも動く
どちらもidに続いてeが渡されている
上は明示的に、下は暗黙的に渡される